<template>

    <div v-if="handleElement.type !== 'line'">
      <div class="row">
        <div class="row-title" style="flex: 3;">大小：</div>
        <InputNumber
          :min="minSize"
          :max="1500"
          :step="5"
          :value="width"
          @change="value => updateWidth(value)"
          style="flex: 4;"
        />
        <template v-if="['image', 'shape', 'audio'].includes(handleElement.type)">
          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="解除宽高比锁定" v-if="fixedRatio">
            <IconLock style="flex: 1;
            color: #fff;" class="icon-btn" @click="updateFixedRatio(false)" />
          </Tooltip>
          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="宽高比锁定" v-else>
            <IconUnlock style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" />
          </Tooltip>
        </template>
        <div style="flex: 1;" v-else></div>
        <InputNumber 
          :min="minSize"
          :max="800"
          :step="5"
          :disabled="handleElement.type === 'text'" 
          :value="height" 
          @change="value => updateHeight(value)"
          style="flex: 4;"
        />
      </div>
      <div class="row">
        <div style="flex: 3;"></div>
        <div style="flex: 4;" class="label">宽</div>
        <div style="flex: 1;"></div>
        <div style="flex: 4;" class="label">高</div>
      </div>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { MIN_SIZE } from '@/configs/element'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import { round } from 'lodash'

export default defineComponent({
  name: 'element-width-height',
 
setup() {
  const slidesStore = useSlidesStore()
  const { handleElement, handleElementId } = storeToRefs(useMainStore())
  const width = ref(0)
  const height = ref(0)
  const fixedRatio = ref(false)
  const { addHistorySnapshot } = useHistorySnapshot()
  
  const minSize = computed(() => {
        if (!handleElement.value) return 20
        return MIN_SIZE[handleElement.value.type] || 20
      })
  watch(handleElement, () => {
    if (!handleElement.value) return
    fixedRatio.value = 'fixedRatio' in handleElement.value && !!handleElement.value.fixedRatio
    if (handleElement.value.type !== 'line') {
      width.value = round(handleElement.value.width, 1)
      height.value = round(handleElement.value.height, 1)
    }
  }, { deep: true, immediate: true })
  // 设置元素宽度、高度、旋转角度
  const updateWidth = (value: number) => {
      if(fixedRatio.value) {
      const props = { height: value * height.value/width.value}
      slidesStore.updateElement({ id: handleElementId.value, props })
      }
      const props = { width: value }
      slidesStore.updateElement({ id: handleElementId.value, props })
      addHistorySnapshot()
  }
  const updateHeight = (value: number) => {
      if(fixedRatio.value) {
      const props = { width: value * width.value/height.value}
      slidesStore.updateElement({ id: handleElementId.value, props })
      }
      const props = { height: value }
      slidesStore.updateElement({ id: handleElementId.value, props })
      addHistorySnapshot()
  }
  // 固定元素的宽高比
  const updateFixedRatio = (value: boolean) => {
      const props = { fixedRatio: value }
      slidesStore.updateElement({ id: handleElementId.value, props })
      addHistorySnapshot()
  }
  return {
    updateFixedRatio,
    updateHeight,
    updateWidth,
    minSize,
    width,
    height,
    fixedRatio,
    handleElement

  }
}
})
</script>

<style lang="scss" scoped>
.row {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}
.title {
  margin-bottom: 22px;
}
.label {
  text-align: center;
}
.btn-icon {
  margin-right: 3px;
}
.icon-btn {
  cursor: pointer;
}
</style>